<template>
	<view class="postLaout">
		<post-nav-bar title="帖子详情"></post-nav-bar>
		<view class="blank"></view>
		<view class="postmaster">
			<view class="left">
				<view class="avatar">
					<image :src="getAvatar(dish.userId)" mode="aspectFill"></image>
				</view>
				<view class="name">{{dish.username}}</view>
			</view>
			<view class="right">
				<button class="flow-btn" plain>+关注</button>
			</view>
		</view>
		<view class="content">
			<view class="title">{{dish.name}}</view>
			<view class="keywords">
				<view v-for="(tag, index) in tags" :key="index" class="tag">
				    {{ tag }}
				</view>
			</view>
			<view class="main-img-box">
				<image :src="getImage(dish.imageUrl)" mode="aspectFill" class="main-img"></image>
			</view>
			<view class="divier">
				----------------材料------------------
			</view>
			<view class="material-box">
				<view class="material" v-for="(item, index) in dish.material" :key="index">
					{{ item }}
				</view>
			</view>
			<view class="divier">
				----------------正文------------------
			</view>
			<view class="body">
				<view class="body-item" v-for="item, index in bodys" :key="index">
					<view class="step">
						<uni-icons type="flag" color="#ff4d4f" size="28"></uni-icons>
						<view class="step-number">
							步骤{{index + 1}}
						</view>
						<view class="step-text">{{item.step}}</view>
						
					</view>
					<view class="step-img-box" v-if="item.image !== '' && item.imgage!== null">
						<image :src="getImage(item.Image)" mode="aspectFill" class="step-img"></image>
					</view>
				</view>
			</view>
			<view class="other-box">
				<uni-icons type="compose" color="#ccc" size="28"></uni-icons>
				{{formatISODateTime(dish.updatedAt)}}
			</view>
		</view>
		<view class="comment-section">
			<view class="title">
				评论区
			</view>
			<view class="comment" v-for="(item,index) in commentList" :key=index>
				<view class="left">
					<view class="avatar">
						<image :src="getAvatar(item.id)" mode="aspectFill"></image>
					</view>
				</view>
				<view class="right">
					<view class="commenter">
						<view class="name">{{item.name}}</view>
					</view>
					<view class="comment-content">
						{{item.content}}
					</view>
					<view class="status">
						<view class="left">
							<view class="time">{{item.time}}</view>
							<button class="reply-btn" plain>
								回复
							</button>
						</view>
						<view class="right">
							<view class="like">
								<uni-icons type="hand-up" color="#ccc" size="20"></uni-icons>
								{{item.likes}}
							</view>
						</view>
					</view>
					<view class="reply-section">
						<view class="reply-content" v-for="(comment,index) in item.comments" :key=index>
							<text class="replyer-name">{{comment.name}}:</text>
							<text class="reply-text">
								{{comment.content}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<comment-input></comment-input>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { appUrl } from '../../main';
import LoginViewVue from '../LoginView/LoginView.vue';

//数据
const dish = ref({})
const tags = ref([])
const bodys = ref([])
const commentList = ref([])
//函数
const initTag = () => {
	const tagArray = dish.value.category.split(',').filter(tag => tag.trim() !== ''); // 分割字符串并过滤空项
	tags.value = tagArray;
}
const getImage = (path) => {
	return "https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/food_moment_discover/train/data/" + path
}
const getAvatar = (userId) => {
	return "https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/food_moment_discover/image/avatar/" + userId + ".jpg"
}
const initBody = () => {
	let body = dish.value.body
	let imageUrls = dish.value.recipes
	let imageUrlMap = imageUrls.reduce((acc, item) => {
	        const stepNumber = parseInt(item.imageUrl.split('/')[1].split('.')[0], 10);
	        acc[stepNumber] = item.imageUrl;
	        return acc;
	    }, {});
	let result = body.map(stepText => {
	        const stepNumber = parseInt(stepText.split(' ')[0], 10);
	        return {
	            step: stepText.split(' ')[3],
	            Image: imageUrlMap[stepNumber] || ''
	        };
	    });
	
	bodys.value = result	
}
const initComment = () => {
	commentList.value = dish.value.comments
}
const formatISODateTime = (isoString) => {
	// 确保输入是一个有效的字符串
	if (typeof isoString !== 'string') {
	    throw new Error('Input must be a string');
	}

	// 创建 Date 对象
	const date = new Date(isoString);

	// 获取年、月、日、小时和分钟
	const year = date.getUTCFullYear();
	const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // 注意月份是从0开始的
	const day = String(date.getUTCDate()).padStart(2, '0');
	const hours = String(date.getUTCHours()).padStart(2, '0');
	const minutes = String(date.getUTCMinutes()).padStart(2, '0');

	// 返回格式化后的日期时间字符串
	return `${year}-${month}-${day} ${hours}:${minutes}`;
}

//钩子
onMounted(() => {
	let id = uni.getStorageSync("dishId")
	try{
		uni.request({
			url: appUrl+'/dish/dishBody',
			data: {
				dishId:id
			},
			method: "post"
		}).then(res => {
			dish.value = res.data.data
			initTag()
			initBody()
			initComment()
		})
	}catch(error){
		uni.showToast({
			title:"信息获取失败",
			icon:"error"
		})
	}
})

</script>

<style lang="scss" scoped>
.blank {
	height: 60rpx;
	background-color: ghostwhite;
	position: fixed;
	top: 50rpx;
	left: 0;
	width: 100%;
	z-index: 8;
}
	
.postLaout{
	.postmaster{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 100rpx;
		.left{
			display: flex;
			justify-content: center;
			align-items: center;
			.avatar{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.name{
				margin-left: 20rpx;
			}
		}
		.right{
			.flow-btn{
				height: 50rpx;
				display: flex;
				align-items: center;
				font-size: 15px;
				color: #FF4D4F;
				border: 1px #FF4D4F solid;
			}
		}
	}
	.content{
		padding: 0 30rpx;
		.title{
			font-size: 25px;
		}
		.divier{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.keywords{
			display: flex;
			flex-wrap: wrap;
			.tag {
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10px 10px 0 0;
				padding: 0 5px;
				border-radius: 4px;
				font-size: 10px;
				color: rgb(221, 213, 158);
				background-color: rgba(221, 213, 158, 0.1);
				border: 1px solid rgb(221, 213, 158);
			}
		}
		.main-img-box{
			margin: 30rpx 0;
			width: 100%;
			border-radius: 10px;
			overflow: hidden;
			.main-img{
				width: 100%;
			}
		}
		.material-box{
			margin-left: 50rpx;
		}
		.body{
			.body-item{
				margin-top: 100rpx;
				.step{
					padding: 20rpx;
					background-color: rgba(255, 190, 187, 0.2);
					border-radius: 10px;
					display: flex;
					align-items: center;
					justify-content: left;
					.step-number{
						margin:0 10rpx;
						width: 100rpx;
						color: #FF4D4F;
						font-weight: bold;
					}
					.step-text{
						margin-left: 10rpx;
					}
				}
				.step-img-box{
					margin: 30rpx 0;
					width: 100%;
					border-radius: 20px;
					overflow: hidden;
					.step-img{
						width: 100%;
					}
				}
				
				&:first-child{
					margin-top: 50rpx;
				}
			}
			
		}
	}
	.comment-section{
		padding: 0 30rpx;
		margin: 50rpx 0;
		.title{
			font-size: 20px;
		}
		.comment{
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
			border-bottom:1px solid #eee;
			.left{
				height: 100%;
				width: 80rpx;
				.avatar{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.right{
				margin-left: 20rpx;
				width: 590rpx;
				
				.commenter{
					width: 100%;
					font-size: 15px;
					color: #888;
				}
				.comment-content{
					font-size: 17px;
					padding: 15rpx 0;
				}
				.status{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						width: 400rpx;
						overflow: hidden;
						.time{
							float: left;
							color: #888;
						}
						.reply-btn{
							float: right;
							border: none;
							color: #CCC;
						}
					}
					.right{
						width: 100rpx;
						.like{
							display: flex;
							align-items: center;
							color: #CCC;
						}
					}
				}
				.reply-section{
					width: 100%;
					margin:30rpx 0;
					background-color: #F6F3F1;
					padding: 10rpx 30rpx;
					border-radius: 10px;
					.reply-content{
						font-size: 15px;
						margin: 5px 0;
						.replyer-name{
							color:#E06C75;
						}
						
					}
				}
			}
		}
	}
}
</style>
